<template>
	<view class="content">
		<u-sticky>
			<!-- 搜索框 -->
			<view class="header paddinglr ffffff">
				<view class="searchBox" @click="goSearch">
					<u-icon name="search" color="rgba(202, 202, 202, 1)" size="22"></u-icon>
					<input class="searchInput" placeholder-class="searchPlaceholder" type="text" placeholder="搜索关键字">
				</view>
			</view>
			<!-- tab栏 -->
			<view class="paddinglr ffffff" style="">
				<u-tabs :list="tabList" @click="change" lineColor="rgba(243, 39, 28, 1)" :activeStyle="{
			    color: '#000000',
			    fontWeight: 800,
			    transform: 'scale(1.05)'}" :inactiveStyle="{
			    color: '#666666',
			    transform: 'scale(1)'
			}"></u-tabs>
			</view>
		</u-sticky>
		<!-- tab内容 -->
		<view class="backFA paddinglr">
			<view class="margin_top flexbetween flex_wrap fafafa">
				<view class="dayShop margin_bottom3" v-for="item in list.data" :key="item.id"
					@click="goGoodsInfo(item.id)">
					<view class="imgBox">
						<image :src="item.image_text" mode="widthFix"></image>
					</view>
					<view class="yihang text_a color_san margin_top">{{item.name}}</view>
					<view class="flexleft margin_top">
						<view class="text_c" style="color: #F3271C;margin-right: 20rpx;">￥{{item.price}}</view>
						<view class="color_jiu text_pee">已拼{{item.sale_num}}件</view>
					</view>

				</view>
			</view>
			<view class="flexcenter placeholderBoxTop" v-if="!list.data.length">
				<image class="placeholderBox" src="/static/placeholderimg.png" mode="widthFix"></image>
			</view>
		</view>
		<tabbardi :current="1"></tabbardi>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				tabActive: 0,
				tabList: [],
				page: 1,
				list: {
					data: []
				},
				category_id: "",
			}
		},
		onLoad() {
			uni.hideTabBar()
			this.getHomeInit()
		},
		methods: {
			getHomeInit() {
				httpRequest.request("/api/index/index", "GET", {}).then(res => {
					this.tabList = res.data.goods_category //天商子标签
					this.tabList.unshift({
						name: "全部",
						id: "",
					})
					this.init()
				})
			},
			init(isPage, page) {
				let _this = this;
				let data = {
					category_id: this.category_id, //分类id
					page: page || 1
				}
				let url = "/api/goods/getlist"
				httpRequest.request(url, 'GET', data, false, false, true).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							this.list = res.data
							_this.list.data = resList.data;
						}
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
			change(e) { //tab栏切换
				this.tabActive = e.index
				this.category_id = e.id
				this.init()
			},
			goGoodsInfo(id) { //商品详情
				uni.navigateTo({
					url: "/pages_index/goodsInfo?id=" + id
				})
			},
			goSearch() { //搜索商品
				uni.navigateTo({
					url: "/pages/index/search"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding-bottom: 150rpx;
	}

	::v-deep.u-tabs__wrapper__nav__item {
		flex: 1;
		white-space: nowrap;
	}

	.backFA {
		background-color: #FAFAFA;
	}

	// 搜索框
	.header {
		display: flex;
		justify-content: space-between;
	}

	.searchBox {
		padding: 18rpx 30rpx;
		background: #F3F3F3;
		border-radius: 60rpx;
		display: flex;
		align-items: center;
		flex: 1;

		.searchInput {
			margin-left: 20rpx;
			font-size: 24rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #C5C5C5;
		}

		.searchPlaceholder {
			font-size: 24rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #C5C5C5;
		}
	}

	.weixuanzhong {
		padding: 10rpx 35rpx;
		background: #EFEFEF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 1rpx solid #EFEFEF;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		white-space: nowrap;
	}

	.xuanzhong {
		padding: 10rpx 35rpx;
		background: rgba(243, 39, 28, 0.1);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 1rpx solid #F3271C;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #F3271C;
		white-space: nowrap;
	}

	// 天商
	.dayShop {
		margin-bottom: 30rpx;

		.imgBox {
			width: 338rpx;
			height: 338rpx;
			border-radius: 11rpx;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>